<template>
    <div>
        <h1>显示列表</h1>
        房号名称<input type="text" v-model="info.name">
         <select v-model="info.lid">
            <option value="">请选择</option>
            <option :value="value.hid" v-for="value in level" :key="value.hid">{{value.hname}}</option>  
        </select>
        <input type="button" value="搜索" @click="GetList">
          <input type="button" value="批量删除" class="btn btn-danger" @click="Dellist" >
          <input type="button" value="批量上架"  class="btn btn-primary" @click="end(1)" >
           <input type="button" value="批量下架" class="btn btn-warning" @click="end(0)" >
        <table class="table table-bordered">
            <tbody>
                <tr>
                   <td><input type="checkbox" v-model="allcheck" @change="checked"></td> 
                    <td>id</td>
                    <td>房型名称</td>
                    <td>房号</td>
                    <td>排序</td>
                    <td>状态</td>
                    <td>备注</td>
                    <td>操作</td>
                </tr>
                <tr v-for="value in infoo.list">
                    <td><input type="checkbox"  v-model="check" :value="value.id"></td>
                    <td>{{value.id}}</td>
                    <td>{{value.hname}}</td>
                    <td>{{value.num}}</td>
                    <td>{{value.name}}</td>
                    <td>{{value.state==1?"上架":"下架"}}</td>
                    <td>{{value.order}}</td>
                    <td><input type="button" value="删除" @click="Del(value.id)" style="background-color:cornflowerblue;">
                        <input type="button" value="下架" v-if="value.state==1" @click="UpdateState(value.id,0)"  style="background-color:brown;">
                       <input type="button" value="上架" v-if="value.state==0"  @click="UpdateState(value.id,1)"  style="background-color: chartreuse;">
                       <input type="button" value="修改" @click="Update(value.id)" style="background-color: aquamarine;">
                       <input type="button" value="详情" @click="Fan(value.id)" style="background-color:burlywood;">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div>
        <span>总条数:{{infoo.totalnum}}</span>
        <span>总页数:{{infoo.totalpage}}</span>
        <span>当前页:{{info.pageindex}}/{{infoo.totalpage}}</span>
        <input type="button" value="首页" @click="fn(1)">
        <input type="button" value="上一页" @click="fn(info.pageindex-1)">
        <input type="button" v-for="o in infoo.totalpage" :value="o" @click="fn(o)">
        <input type="button" value="下一页" @click="fn(info.pageindex+1)">
        <input type="button" value="尾页" @click="fn(infoo.totalpage)">
        <input type="text" v-model="info.pageindex">
        <input type="button" value="跳转" @click="fn(info.pageindex)">
          <select v-model="info.value" @change="GetList">
            <option :value="o" v-for="o in arr">每页{{o}}条</option>
        </select>
    </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import router from '@/router';
onMounted(()=>{
    GetList();
    GetLevel();
})
let level:any=ref([])
let arr:any=ref([2,4,6])
const fn=(num:any)=>{
    if(num<1){
        info.value.pageindex=1;
        return;
    }
    if(num>infoo.value.totalpage){
        info.value.pageindex=infoo.value.totalpage
        return;
    }
    info.value.pageindex=num;
    GetList();
}
let check:any=ref([]);
let allcheck=ref();

let info:any=ref({
    name:"",
    lid:"",
    pageindex:1,
    pagesize:3
})


let infoo:any=ref({
    list:[],
    totalnum:"",
    totalpage:""
})



const end=(state:any)=>{
    if(check.value==""){
        alert("未选择数据");
        return;
    }
    let f=confirm("确认下架吗");
    if(f){
        axios({
        url:'https://localhost:7058/api/House/UpdateStateList2',
        method:'get',
        params:{
            ids:check.value.toString(),
            state:state,
        }
    })
    .then((res)=>{
       if(res.data>0){
        alert("下架成功");
        allcheck.value=false;
        check.value=[];
        GetList();
       }
    })
    }
}

const Dellist=()=>{
    if(check.value==""){
        alert("未选择数据");
        return;
    }
    let f=confirm("确认删除吗");
    if(f){
        axios({
        url:'https://localhost:7058/api/House/DelList',
        method:'get',
        params:{
            ids:check.value.toString()
        }
    })
    .then((res)=>{
       if(res.data>0){
        alert("删除成功");
        allcheck.value=false;
        check.value=[];
        GetList();
       }
    })
    }
}


const checked=()=>{
    if(allcheck.value==true){
        check.value=infoo.value.list.map((item:any)=>{
            return item.id
        })
    }
    else{
        check.value=[];
    }
}

//跳转
const Update=(id:any)=>{
    router.push({
        path:'/UpdateHouse',
        query:{
            id:id
        }
    })
}
const Fan=(id:any)=>{
    router.push({
        path:'/HouseFan',
        query:{
            id:id
        }
    })
}

const GetLevel=()=>{
    axios({
        url:'https://localhost:7058/api/House/HouseLevel',
        method:'get',
    })
    .then((res)=>{
        console.log(res);
        level.value=res.data
    })
    .catch((err)=>{
        console.log(err);
    })
}
//删除
const Del=(id:any)=>{
    console.log(id)
    let f=(confirm("确认要删除吗?"))
    axios({
        url:'https://localhost:7058/api/House/Del',
        method:'get',
        params:{
            id:id
        }
    })
    .then((res)=>{
        console.log(res)
        if(res.data>0){
            alert("删除成功");
            GetList();
        }
        else
        {
            alert("删除失败")
        }
    })
}
//修改状态
const UpdateState=(id:any,state:any)=>{
    console.log(id,state)
    let f=(confirm("确认要修改状态吗?"))
    axios({
        url:'https://localhost:7058/api/House/UpdateState',
        method:'get',
        params:{
            id:id,
            state:state
        }
    })
    .then((res)=>{
        console.log(res)
        if(res.data>0){
            alert("修改成功");
            GetList();
        }
        else
        {
            alert("修改失败")
        }
    })
}
//显示
const GetList=()=>{
    axios({
        url:'https://localhost:7058/api/House/GetHouseDtoAll',
        method:'get',
        params:info.value
    })
    .then((res)=>{
        console.log(res);
        infoo.value=res.data
    })
    .catch((err)=>{
        console.log(err);
    })
}
</script>

<style scoped>

</style>